
$light-bg-color: #F5F6F8;
$dark-bg-color: #20232A;
$dark-bg-color-darker: #121419;
$dark-bg-color-lighter: #393F4B;
$blue-primary-color: #1976D2;
$blue-highlight-color: #61DAFB;
$yellow-highlight-color: #FAC863;
$red-highlight-color: #FF697A;
$red-primary-color: #ae0000; // TODO: make match better
$green-primary-color: #007c00; // TODO: make match better

$line-height: 1.7; // applied globally
$font-size: 16px; // applied globally
$font-size-title: 22px; // must be used manually
$font-family: 'Muli', sans-serif; // applied globally
$font-color: #20232A; // applied globally
$font-color-weak: #989ba2;
$font-weight-thin: 300; // must be used manually
$font-weight-normal: 400; // applied globally
$font-weight-bold: 600; // applied to all b/strong tags
  // NOTE: some places manually use 800
  // even in blog-sidebar.html

$link-color: $blue-primary-color; // must be used manually
$link-color-dark: #0b4d8e; // must be used manually

$border-radius: 2px; // for buttons and stuff

$code-font-size: .8em;
$code-font-family: Monaco, Consolas, "Lucida Console", monospace;
$code-line-height: 1.8em;

$page-max-content-width: 1200px;
$page-gutter: 30px;
$one-col-breakpoint: 790px;

$control-font-size: 14px;
$control-line-height: 18px;
$control-text-color: #656667;
$control-fill-color: #eaebec;
$control-border-color: #adaeaf;
$control-border-color-light: #c8c9cc;
$control-border-color-dark: #6c6d6f;
$control-v-padding: 4px; // very "condensed", but will stretch height
$control-h-padding: 8px;
